<template>
    <div class="messageBoardView">
        <div class="messageBoardHead">
            <img src="https://pic.imgdb.cn/item/64256f7fa682492fcc4f78b3.jpg" alt="">
        </div>
        <!-- 留言区 -->
        <div class="messageBoard-from">
            <van-cell-group inset>
                <van-field v-model="messageText" rows="1" autosize label="留言" type="textarea" placeholder="请输入留言"
                    maxlength="100" show-word-limit />
                <van-button v-show="!countDownComment" @click="clickSendMessageBoard" icon="guide-o" type="primary">
                    发送
                </van-button>
                <!-- 倒计时 -->
                <van-count-down v-show="countDownComment" @finish="timeFinish" :time="time" format="ss 秒后可发"
                    :auto-start="false" ref="timeDown" />
            </van-cell-group>
        </div>
        <!-- 留言列表 -->
        <div class="messageBoard-list">
            <div class="messageBoard-list-item" v-for="item in MessageBoardList" :key="item.item_id">
                <div>
                    <img src="https://s1.ax1x.com/2023/04/02/ppf7FSA.png" alt="">
                    <div>
                        <p>* * *</p>
                        <p> {{ item.create_timer }}</p>
                    </div>
                </div>
                <p> {{ item.message_text }}</p>
                <p v-if="item.reply_text !== null" class="admin-reply-text">博主回复: <span>{{ item.reply_text }}</span> </p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { showToast } from 'vant';
import { ref, onMounted, customRef } from "vue";
import { replaceStr } from "@/assets/replaceCommentStr";
import { sendMessageBoard, getmessageboard } from "@/api/request";
import { v4 as uuidv4 } from "uuid";
import moment from "moment";


// 敏感词过滤
const commentReplaceRef = (value) => {
    return customRef((track, trigger) => {
        return {
            // 访问数据的时候会自动执行
            get() {
                track()
                console.log('数据被访问了');
                return value
            },
            // 数据修改的时候自动执行的函数
            set(newValue) {
                // console.log('数据被修改了', newValue);
                value = replaceStr(newValue)
                trigger()
            }
        }

    })
}
// 发送评论等60秒后可继续发
// 显示和隐藏
const countDownComment = ref(false)
const time = ref(60 * 1000);
// 定义ref才能实用它里面的开始倒计时时间
const timeDown = ref()
// 监测倒数结束隐藏
const timeFinish = () => {
    countDownComment.value = false
}

// 留言框
const messageText = commentReplaceRef('')
const MessageBoardList = ref([])

onMounted(() => {
    getmessageboard().then(({ data }) => {
        console.log(data);
        if (data.code == 200) {
            MessageBoardList.value = data.data
        }
    })
})

// 添加留言
const clickSendMessageBoard = () => {
    // console.log(uuidv4());
    let nowTimer = moment(new Date().getTime()).format('YYYY-MM-D HH:mm:ss');
    if (messageText.value == '') {
        showToast('请输入留言内容');
    } else {
        // 点击后显示倒计时
        countDownComment.value = true
        // 开始倒计时
        timeDown.value.start()
        sendMessageBoard({
            id: uuidv4(),
            messageText: messageText.value,
            createTimer: nowTimer
        }).then(({ data }) => {
            console.log(data);
            if (data.code == 200) {
                MessageBoardList.value.unshift({
                    id: uuidv4(),
                    message_text: messageText.value,
                    create_timer: nowTimer
                })
                messageText.value = ''

            }
        })
    }

}
</script>
<style lang="scss">
.messageBoardView {
    padding: 3.125rem .875rem 0;

    .messageBoardHead {
        height: 12.5rem;
        background-color: #f7f7fb;
        border-radius: .625rem;
        margin: .625rem 0;

        img {
            width: 100%;
            height: 12.5rem;
        }
    }

    // 发送留言
    .messageBoard-from {
        margin-top: 1.25rem;

        .van-cell-group {
            width: 100%;
            margin: 0 auto;
            padding-bottom: 2.75rem;
            text-align: right;
            position: relative;

            .van-button {
                height: 2.125rem;
                position: absolute;
                bottom: 0;
                right: 0;
            }

            // 倒计时
            .van-count-down {
                color: #fff;
                width: 5rem;
                position: absolute;
                bottom: 0;
                right: 0;
                font-size: .8125rem;
                background-color: #1989fa;
                border-radius: .25rem;
                padding: .375rem;

            }

        }



    }

    // 留言列表
    .messageBoard-list {
        .messageBoard-list-item {
            margin: .625rem 0;
            background-color: #fff;
            padding: .625rem;
            border-radius: .625rem;
            word-break: break-all;

            >div {
                display: flex;
                align-items: center;

                img {
                    width: 2.125rem;
                    height: 2.125rem;
                    border-radius: 50%;
                }

                >div {
                    margin-left: .625rem;

                    p {
                        margin: 0;
                    }

                    p:nth-child(1) {
                        font-size: .875rem;
                    }

                    p:nth-child(2) {
                        font-size: .8125rem;
                        color: #ccc;
                    }
                }
            }

            // 留言内容
            >p {
                font-size: .875rem;
                padding-left: .625rem;
            }

            .admin-reply-text {
                border-top: 1px solid #eee;
                padding: .625rem 0 0;
                font-size: .9375rem;
                font-weight: bold;
                color: #1989fa;
                margin: 0;

                span {
                    color: #444;
                }
            }
        }
    }
}
</style>